<%--
  Created by IntelliJ IDEA.
  User: Jason
  Date: 2016/9/2
  Time: 10:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>左侧导航栏</title>
    <style>
        .nav-left {
            position: fixed;
            left: 0;
            width: 250px;
            bottom: 0;
            top: 60px;
            border-right: 1px solid #e2e2e2;
        }

        .nav-left ul {
            width: 250px;
            min-height: 100px;
            border: 1px solid #e2e2e2;
            border-left: 0;
            padding-bottom: 10px;
            padding-top: 10px;
            border-top: 0;
            margin-bottom: 0;
        }

        .nav-left ul li {
            list-style: none;
            margin-left: -40px;
        }

        .nav-left ul .nav-title {
            height: 40px;
            line-height: 40px;
            font-family: "Consolas";
            font-size: larger;
            font-weight: 600;
            text-indent: 10px;
            color: #808080;
        }

        .nav-left ul .nav-item {
            height: 35px;
            line-height: 35px;
            font-family: "微软雅黑";
            text-indent: 45px;
            color: #2E2D3C;
        }

        .nav-left ul a {
            text-decoration: none;
        }

        .nav-left ul .nav-item:hover {
            background-color: #e4e4e4;
        }

        .body-container {
            left: 250px;
            top: 60px;
            right: 0;
            bottom: 0;
            position: absolute;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="nav-left">
    <c:if test="${currentUser.userRealName == 0}">
        <ul>
            <li class="nav-title">
                <span class="glyphicon glyphicon-fire"></span>
                系统设置
            </li>
            <a href="user_rule.do">
                <li class="nav-item">规则管理</li>
            </a>
        </ul>
    </c:if>
    <ul>
        <li class="nav-title">
            <span class="glyphicon glyphicon-fire"></span>
            客户管理
        </li>
        <a href="user_guest_list.do">
            <li class="nav-item">客户列表</li>
        </a>
    </ul>
</div>
<script>


    $(function () {
        setLeftSelectedItem();
    });

    function setLeftSelectedItem() {
        var ul_index = cookie.getCookie("ul_index");
        var li_index = cookie.getCookie("li_index");
        if (isNull(ul_index)) {
            li_index = 1;
            ul_index = 0;
        }
        var ul = $(".nav-left ul")[ul_index];
        var li = $(ul).find("li")[li_index];
        $(li).css("background-color", "#44B549");
        $(li).css("color", "white");
    }

    $(".nav-item").click(function () {
        var li_index = $(this).parent().index();
        var ul_index = $(this).parent().parent().index();
        cookie.setCookie("li_index", li_index);
        cookie.setCookie("ul_index", ul_index);
    });


</script>
</body>
</html>
